<template>
  <view class="language-switch">
    <picker 
      :value="currentIndex" 
      :range="languages" 
      range-key="label"
      @change="handleChange"
    >
      <view class="picker">
        <text class="current">{{ languages[currentIndex].label }}</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
    </picker>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { setLanguage } from '@/i18n'

const { locale } = useI18n()

const languages = [
  { value: 'zh-Hans', label: '简体中文' },
  { value: 'zh-Hant', label: '繁體中文' },
  { value: 'pt', label: 'Português' }
]

const currentIndex = computed(() => {
  return languages.findIndex(lang => lang.value === locale.value)
})

const handleChange = (e) => {
  const selected = languages[e.detail.value]
  setLanguage(selected.value)
}
</script>

<style lang="scss">
.language-switch {
  .picker {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: $radius-xl;
    
    .current {
      font-size: 26rpx;
      color: #fff;
      margin-right: 8rpx;
    }
    
    .icon-arrow-down {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style> 